import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:mtf/app/modules/register_module/register_controller.dart';
import 'package:mtf/app/widget/AppBarLeftTitle.dart';
import 'package:mtf/app/widget/ClickableText.dart';
import 'package:mtf/app/widget/VercodeTimerWidget.dart';

import '../../../R.dart';
import '../../theme/app_colors.dart';
/**
 * GetX Template Generator - fb.com/htngu.99
 * */

class registerPage extends GetView<registerController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBarLeftTitle(
        title: '',
        hasBack: true,
        backgroundColor: Colors.transparent,
        isWhiteBack: false,
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(24, 0, 24, 70),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("注册",
                    style: TextStyle(
                        fontSize: 28,
                        fontWeight: FontWeight.bold,
                        color: c_333333)),
                Container(
                  margin: const EdgeInsets.only(top: 40),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: c_f3f5f7,
                  ),
                  child: TextField(
                    keyboardType: TextInputType.phone,
                    decoration: InputDecoration(
                      contentPadding: const EdgeInsets.fromLTRB(20, 14, 20, 14),
                      hintText: "请输入您的手机号",
                      hintStyle: TextStyle(fontSize: 14, color: c_999999),
                      prefixIcon: Padding(
                        padding: const EdgeInsets.all(15.0),
                        child: SvgPicture.asset(R.assetsImgIcSvgPhone),
                      ),
                      border: InputBorder.none,
                    ),
                    style: TextStyle(color: c_333333, fontSize: 14),
                    controller: controller.phoneController,
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 15),
                  padding: EdgeInsets.only(right: 15),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: c_f3f5f7,
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Expanded(
                        flex: 1,
                        child: TextField(
                          decoration: InputDecoration(
                            contentPadding:
                            const EdgeInsets.fromLTRB(20, 14, 20, 14),
                            hintText: "请输入验证码",
                            hintStyle: TextStyle(fontSize: 14, color: c_999999),
                            prefixIcon: Padding(
                              padding: const EdgeInsets.all(15.0),
                              child: SvgPicture.asset(R.assetsImgIcSvgYzm),
                            ),
                            border: InputBorder.none,
                          ),
                          style: TextStyle(color: c_333333, fontSize: 14),
                          controller: controller.yzmController,
                        ),
                      ),
                      Container(
                          height: 32,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(16),
                            color: c_f12f38,
                          ),
                          child: VercodeTimerWidget(
                            controller.verController,
                            onPressed: () {
                              controller.reqYzm();
                            },
                          ))
                    ],
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 15),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: c_f3f5f7,
                  ),
                  child: Obx(() {
                    return TextField(
                      obscureText: controller.OneObscure,
                      decoration: InputDecoration(
                        contentPadding:
                        const EdgeInsets.fromLTRB(20, 14, 20, 14),
                        hintText: "6-12位字母与数字组合",
                        hintStyle: TextStyle(fontSize: 14, color: c_999999),
                        prefixIcon: Padding(
                          padding: const EdgeInsets.all(15.0),
                          child: SvgPicture.asset(R.assetsImgIcSvgPsw),
                        ),
                        suffixIcon: IconButton(
                          splashColor: Colors.transparent,
                          iconSize: 18,
                          icon: Icon(controller.OneObscure
                              ? Icons.visibility
                              : Icons.visibility_off),
                          onPressed: () {
                            controller.OneObscure = !controller.OneObscure;
                          },
                        ),
                        border: InputBorder.none,
                      ),
                      style: TextStyle(color: c_333333, fontSize: 14),
                      controller: controller.passwordController,
                    );
                  }),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 15),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: c_f3f5f7,
                  ),
                  child: Obx(() {
                    return TextField(
                      obscureText: controller.TwoObscure,
                      decoration: InputDecoration(
                        contentPadding:
                        const EdgeInsets.fromLTRB(20, 14, 20, 14),
                        hintText: "请确认登录密码",
                        hintStyle: TextStyle(fontSize: 14, color: c_999999),
                        prefixIcon: Padding(
                          padding: const EdgeInsets.all(15.0),
                          child: SvgPicture.asset(R.assetsImgIcSvgPsw),
                        ),
                        suffixIcon: IconButton(
                          splashColor: Colors.transparent,
                          iconSize: 18,
                          icon: Icon(controller.TwoObscure
                              ? Icons.visibility
                              : Icons.visibility_off),
                          onPressed: () {
                            controller.TwoObscure = !controller.TwoObscure;
                          },
                        ),
                        border: InputBorder.none,
                      ),
                      style: TextStyle(color: c_333333, fontSize: 14),
                      controller: controller.password2Controller,
                    );
                  }),
                ),
                Obx(() {
                  return Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Checkbox(
                          value: controller.CheckObs,
                          shape: CircleBorder(),
                          checkColor: Colors.white,
                          activeColor: Colors.red,
                          onChanged: (value) {
                            controller.CheckObs = !controller.CheckObs;
                          }),
                      Text("我已阅读并同意"),
                      ClickableText(
                        text: "网络服务协议",
                        style: TextStyle(
                            color: Colors.red,
                            decoration: TextDecoration.underline),
                        onClick: controller.clickNetAgreement,
                      ),
                      Text("和"),
                      ClickableText(
                        text: "隐私政策",
                        style: TextStyle(
                            color: Colors.red,
                            decoration: TextDecoration.underline),
                        onClick: controller.clickPrivacyAgreement,
                      )
                    ],
                  );
                }),
                Center(
                    child: Container(
                      margin: const EdgeInsets.only(top: 25),
                      width: double.maxFinite,
                      height: 48,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(24),
                        color: c_f12f38,
                      ),
                      child: TextButton(
                          child: Text("注册",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold)),
                          onPressed: () {
                            controller.clickRegister();
                          }),
                    ))
              ]),
        ),
      ),
    );
  }
}
